import Vue from "vue/dist/vue.esm";
import Axios from "axios";
import stringify from "querystring"

// 在主文件里一般配置在最前面
// 主文件处理好后 子文件不用每次都创建
let axios = axios.created({
    transformRequest:[
        function(data){
            return stringify(data)
        }
    ]
})

let vm = new Vue({
    el:"#div1",
    data:{
        name:"",
        age:""
    },
    async created(){
        // get请求
        let {data} = await Axios.get('./data/user.json');
        this.name = data.name;
        this.age = data.age;
        // post请求
        let {data}=await Axios({
            url:"./data/user.json",
            method:"post",
            data:{
                a:12,
                b:12
            },
            transformRequest:[
                // 改变请求的数据  如果不转变的话axios默认给你拿json发到服务器
                function(data){
                    // 这里的data = 上面的参数data
                    let arr= [];
                    for (key in data){
                        arr.push(`${key} = ${data[key]}`);
                    }
                    return arr.json('&');
                    // a=12&b=12这样的方式放松就会解决
                    // webpack 可以把后台使用的模块编译到前台里面
                    // const querystring = require('quertstring');
                    // querystring.parse('a=12&b=12')  req:{a:12,b:12}
                    // quertstring.stringify({a:12,b:12}) 'a=12&b=12'
                    // 所以简便的写法
                    return stringify(data)
                }
            ]

        })
        // fetch
        let res = await fetch('data/user.json');
        let data = await res.json();
        console.log(data);
        // post fetch
        let formData = new FormData();
        formData.append('a',1);
        formData.append('b',2);

        let res = await fetch('data/sum.php',{
            method:'post',
            body:formData
        })
        let data = await res.json();
        console.log(data);
    },
    template:`
        <div>
            <div>姓名：{{name}}</div>
            <div>年龄：{{age}}</div>
        </div>
    `
})